import { memo } from 'react';
import { Button, Flex, message, Modal } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { observer } from 'mobx-react-lite';

import store from '@/store';
import Icon from '@/component/Icon';
import { SettingProps } from '@/view/home/Setting';
import useIpcSend, { TypeKey as IpcSendType } from '@/hooks/useIpcSend';
import Styles from './index.module.less';

type SystemProps = Pick<SettingProps, 'toggleSetting'>;
export default memo<SystemProps>(
    observer((props) => {
        const { app } = store.useStore();
        const [modal, ContextHandler] = Modal.useModal();
        const ipcRender = useIpcSend(IpcSendType.print);

        const cleanCache = () => {
            modal.confirm({
                content: '清除缓存后，将清除日志以及记录数据，确认要清除吗？',
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    app.cleanCache()
                        .then((res) => {
                            if (res.data.code !== 200)
                                throw new Error(res.data.result);
                            message.success('清除成功！');
                        })
                        .catch((e) => {
                            message.error(`清除失败:${e.message}`);
                        });
                }
            });
        };

        const restartServices = () => {
            modal.confirm({
                content: '重启服务时，打印整体功能将失效，确定要重启吗？',
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    app.awakenPrintService();
                    props.toggleSetting(false);
                }
            });
        };

        const openCacheDir = () => {
            ipcRender('open:url', app.appCacheDir.result.basic);
        };

        return (
            <>
                {ContextHandler}
                <Flex wrap gap="small" className={Styles.system}>
                    <Button
                        loading={app.cleanCacheOption.loading}
                        onClick={cleanCache}
                        className={Styles.cleanCacheBtn}
                        icon={<DeleteOutlined />}
                        block
                    >
                        {app.loadingTextOption.text || '清除程序缓存'}
                    </Button>
                    <Button
                        loading={app.loadingTextOption.loading}
                        onClick={restartServices}
                        className={Styles.restartServices}
                        icon={<Icon name="icon-zhongqi" />}
                        block
                    >
                        {app.loadingTextOption.text || '重启打印服务'}
                    </Button>
                    <Button
                        loading={
                            app.loadingTextOption.loading ||
                            app.appCacheDir.loading
                        }
                        disabled={!app.appCacheDir.result.basic}
                        onClick={openCacheDir}
                        className={Styles.openDirCache}
                        icon={<Icon name="icon-dakai" />}
                        block
                    >
                        {app.loadingTextOption.text || '打开缓存目录'}
                    </Button>
                </Flex>
            </>
        );
    })
);
